<template>
  <div class="content_modal">
    <div class="header_modal">
      <div class="header_item">
        <div class="header_title">总用例数</div>
        <div class="header_data">{{ dataInfo.totalExample || 0 }}</div>
      </div>
      <div class="header_item">
        <div class="header_title">环境数</div>
        <div class="header_data">{{ dataInfo.totalEnv || 0 }}</div>
      </div>
      <div class="header_item">
        <div class="header_title">昨天执行用例数</div>
        <div class="header_data color_black">
          {{ dataInfo.totalYesterdayRate || 0 }}
        </div>
        <div
          class="header_rate"
          :class="totalYesterdayRate >= 0 ? 'rise_block' : 'decline_block'"
        >
          <el-icon v-if="totalYesterdayRate >= 0"><Top /></el-icon>
          <el-icon v-else><Bottom /></el-icon>
          {{ dataInfo.totalYesterdayRate || 0 }}%
        </div>
      </div>
      <div class="header_item">
        <div class="header_title">昨天执行总通过率</div>
        <div class="header_data color_black">
          {{ dataInfo.totalYesterdaySuccessRate || 0 }}
        </div>
        <div
          class="header_rate"
          :class="
            totalYesterdaySuccessRate >= 0 ? 'rise_block' : 'decline_block'
          "
        >
          <el-icon v-if="totalYesterdaySuccessRate >= 0"><Top /></el-icon>
          <el-icon v-else><Bottom /></el-icon>
          {{ dataInfo.totalYesterdaySuccessRate || 0 }}%
        </div>
      </div>
    </div>
    <div class="main_block">
      <div class="main_modal">
        <ModulePassRate
          :dataInfo="dataInfo.totalSuccess"
          :test_record_list="test_record_list"
          :testActive="testActive"
          @query="getHomeData"
        ></ModulePassRate>
      </div>
    </div>
    <!-- <div class="main_modal">
      <EnvironmentalPassRate :dataInfo = dataInfo.totalEnvSuccess></EnvironmentalPassRate>
    </div> -->
  </div>
</template>

<script setup name="home">
import ModulePassRate from "./components/ModulePassRate.vue";
import EnvironmentalPassRate from "./components/EnvironmentalPassRate.vue";
import {
  AdminExampleStaticExampleByModuleType,
  GetTestCaseRecord,
} from "@/api/test_case.js";
import { iso8601ToTime } from "@/utils/index.js";

const dataInfo = ref({});
const totalYesterdayRate = ref(0);
const totalYesterdaySuccessRate = ref(0);
const test_record_list = ref([]);
const testActive = ref("");
onMounted(() => {
  getTestRecordDropdownData();
});
// 获取测试记录下拉框数据
const getTestRecordDropdownData = () => {
  let obj = {
    pageNum: 1,
    pageSize: 100,
    queryParams: {
      recordStatus: "COMPLETED",
      recordResult: "",
      recordTime: [],
    },
  };
  GetTestCaseRecord(obj)
    .then((res) => {
      console.log("测记录数据", res);
      if (res && res.list && res.list.length) {
        res.list.forEach((item) => {
          item.recordTime = iso8601ToTime(item.recordTime);
        });
        test_record_list.value = res.list;
        testActive.value = test_record_list.value[0].recordId;
        getHomeData(testActive.value);
      } else {
        test_record_list.value = [];
        getHomeData()
      }
    })
    .finally(() => {
      
    });
};
// 获取首页数据
const getHomeData = (value) => {
  let obj = {
    recordId: value,
  };
  AdminExampleStaticExampleByModuleType(obj).then((res) => {
    dataInfo.value = res;
    totalYesterdayRate.value = res.totalYesterdayRate || 0;
    totalYesterdaySuccessRate.value = res.totalYesterdaySuccessRate || 0;
  });
};
</script>

<style lang="scss" scoped>
.content_modal {
  width: 100%;
  height: calc(100vh - 70px);
  overflow-y: scroll;
  .header_modal {
    width: 100%;
    height: 120px;
    background-color: #fff;
    border-radius: 0 0 6px 6px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header_item {
      // width: 150px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .header_title {
        padding-bottom: 12px;
        color: #666;
      }
      .header_data {
        color: #6d9ef6;
        font-weight: 700;
        font-size: 32px;
      }
      .header_rate {
        width: auto;
        padding: 2px 10px;
        color: #fff;
        display: flex;
        align-items: center;
        font-size: 12px;
      }
      .rise_block {
        background-color: #bce4a9;
      }
      .decline_block {
        background-color: #e1a29c;
      }
    }
  }
  .main_block {
    width: 100%;
    height: calc(100% - 125px);
    background-color: #fff;
  }
  .main_modal {
    width: 100%;
    margin-top: 5px;
    //height: 600px;
    // height: calc(100% - 120px);
    padding-top: 20px;
  }
}
.color_black {
  color: #333 !important;
}
</style>
